<template>
    <div class="shang-pin-container">
      <div class="image-container">
        <img :src="goodsInfo.imgUrl" :alt="goodsInfo.name" class="goods-image">
      </div>
      <div class="info-container">
        <h3 class="goods-title">{{ goodsInfo.name }}</h3>
        <p class="goods-sales">销量: {{ goodsInfo.sales }}</p>
      </div>
    </div>
</template>

<script>
export default {
  name: 'ShangPin',// 意思 是商品组件 
  //props 是父组件传递给子组件的数据
  props: {
    goodsInfo: {
      type: Object, // 表示 goodsInfo 是一个对象
      required: true  // 表示 goodsInfo 是必填的，如果不传递 goodsInfo 就会报错
    }
  },
  data() {
    return {
      // 可以在这里添加更多数据或方法
    };
  }

}
</script>

<style  lang="scss">
.shang-pin-container  {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: row;
  /* 加上边框  */
  border: 2px solid #d8d0d0; /* 边框颜色 */
  border-radius: 4px; /* 圆角 */
  overflow: hidden;
}
.image-container{
  width: 30%;
  // height: 100%; 图片高度100%会导致占不满容器，所以移除
  display: flex;
  justify-content: center;
  align-items: center;
}
.goods-image {
  width: 100%;
  height: 100%; /* 确保图片填满容器 */
  max-height: 100%; /* 确保图片不超过容器高度 */
  
}
</style>